<template>
  <div v-if="isShow" class="wrap">
    <!--风速-->
    <div class="item">
      <svg-icon
        v-if="socketWeatherInfo.wind_speed > 6"
        class="img"
        icon-class="wind_warning"
      />
      <svg-icon v-else class="img" icon-class="wind_normal" />
      <svg-icon v-if="false" class="img" icon-class="wind_danger" />
      <span class="args"
        >{{ socketWeatherInfo.wind_speed }}
        <span class="list_menu_wrap">m/s</span></span
      >
      <span class="list_menu_wrap"
        >风速：{{ Number.parseInt(socketWeatherInfo.wind_force) }}级</span
      >
    </div>
    <!--雨雪-->
    <div class="item">
      <svg-icon
        v-if="socketWeatherInfo.weather_detection === '无雨雪'"
        class="img"
        icon-class="rain_normal"
      />
      <svg-icon v-else class="img" icon-class="rain_warning" />
      <svg-icon v-if="false" class="img" icon-class="rain_danger" />
      <span class="args">{{
        socketWeatherInfo.weather_detection
          ? socketWeatherInfo.weather_detection
          : "未知"
      }}</span>
      <span class="list_menu_wrap">天气</span>
    </div>
    <!--湿度 -->
    <div class="item">
      <svg-icon class="img" icon-class="humidity" />
      <span class="args"
        >{{ socketWeatherInfo.humidity
        }}<span class="list_menu_wrap">%RH</span></span
      >
      <span class="list_menu_wrap">湿度</span>
    </div>
    <!--历史告警天气 -->
    <div class="btn" @click="closeNestInfo">退出</div>
    <div
      class="timez"
      :style="{
        background:
          socketWeatherInfo.wind_speed !== 'N' ? '#95f204' : '#AAAAAA',
      }"
    >
      <template>
        <div
          v-for="(speeditem, spddeindex) in socketWeatherInfo.weather_info"
          :key="spddeindex"
          :style="{
            width:
              formatTimeWidth(
                speeditem['times'],
                socketWeatherInfo.time_start,
                socketWeatherInfo.time_end
              ) + '%',
            left:
              formatTimeLeft(
                speeditem['times'],
                socketWeatherInfo.time_start,
                socketWeatherInfo.time_end
              ) + '%',
          }"
          :class="formatTypeClass(speeditem.abnormal_type)"
        >
          <div class="hover_info">
            <div class="forleftpoint">
              <p v-if="speeditem.times">
                {{ speeditem.times.begin_time }} 至
                {{ speeditem.times.finish_time || "此刻" }}
              </p>
              <p>
                {{ speeditem.abnormal_type | formatAbnormalType }}:
                {{ formatTimeDiff(speeditem["times"]) }}
              </p>
            </div>

            <div class="uptriangle" />
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { MessageBox } from "element-ui";

/**
 * 风速 ：等级和速度  wind_force  wind_speed
 * 天气 ：雨雪  weather_detection
 * 湿度：98.90%RH   humidity  temperature
 *
 * "humidity": "63.8",
 "station_id": 10031195,
 "station_name": "金川工业区",
 "temperature": "30.4",
 "weather_detection": "无雨雪",
 "wind_force": "1.0",
 "wind_speed": "0.6"
 */
export default {
  name: "WeatherInfoComp",
  filters: {
    formatAbnormalType(type) {
      var name;
      if (type === "0") {
        name = "有雨雪";
      }
      if (type === "1") {
        name = "风速异常";
      }
      if (type === "2") {
        name = "有雨雪,风速异常";
      }
      if (type === "3") {
        name = "气象站离线";
      }
      if (type === "4") {
        name = "无异常";
      }
      return name;
    },
  },
  props: {
    isShow: {
      type: Boolean,
      default: () => true,
    },
    nestId: {
      type: String,
      default: () => "",
    },
    weatherInfo: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    weatherInfo(val) {
      this.socketWeatherInfo = val;
      this.socketWeatherInfo.wind_force = Number.parseInt(
        this.socketWeatherInfo.wind_force
      );
      // this.$message(this.socketWeatherInfo.wind_force)
      // this.socketWeatherInfo.wind_force = 7
      // this.socketWeatherInfo.weather_detection = '无雨雪'
    },
  },
  data() {
    return {
      timer: undefined,
      socketWeatherInfo: {
        wind_force: "0",
        wind_speed: "N",
        weather_detection: "N",
        temperature: "N",
        humidity: "N",
        station_name: "N",
        status: 0,
        weather_info: [],
        time_start: "",
        time_end: "",
      },
    };
  },
  mounted() {
    console.log("mounted-weatherInfoComp");
    this.$bus.emit("toggleNestLayer", false);
    this.$bus.emit("toggleIssueLayer", false);

    // this.initNestId()
    // this.requestWeather()
    // this.startInterval()
  },
  beforeDestroy() {
    this.finishInterval();
  },
  methods: {
    formatTypeClass(type) {
      var classname = "";
      // ['有雨雪', '风速异常', '有雨雪,风速异常', '气象站离线', '无异常']
      if (type === "0") {
        classname = "rain_abnormal_line";
      }
      if (type === "1") {
        classname = "speed_abnormal_line";
      }
      if (type === "2") {
        classname = "speed_rain_abnormal_line";
      }
      if (type === "3") {
        classname = "offline";
      }
      return classname;
    },
    formatTimeDiff(time) {
      var diffTime;
      var startTime = new Date(time.begin_time).getTime() / 1000;
      var endTime = new Date(time.finish_time).getTime() / 1000;
      var diffNum = (endTime - startTime) / 60;
      if (diffNum <= 60) {
        if (diffNum.toString().indexOf(".") === -1) {
          diffTime = diffNum + "分钟";
        } else {
          diffTime =
            diffNum.toString().split(".")[0] +
            "分钟" +
            (parseFloat("0." + diffNum.toString().split(".")[1]) * 60).toFixed(
              0
            ) +
            "秒";
        }
      }
      if (diffNum > 60) {
        diffNum = diffNum / 60;
        if (diffNum <= 24) {
          if (diffNum.toString().indexOf(".") === -1) {
            diffTime = diffNum + "小时";
          } else {
            diffTime =
              diffNum.toString().split(".")[0] +
              "小时" +
              (
                parseFloat("0." + diffNum.toString().split(".")[1]) * 24
              ).toFixed(2) +
              "分钟";
          }
        } else {
          diffNum = diffNum / 24;
          if (diffNum.toString().indexOf(".") === -1) {
            diffTime = diffNum + "天";
          } else {
            diffTime =
              diffNum.toString().split(".")[0] +
              "天" +
              (
                parseFloat("0." + diffNum.toString().split(".")[1]) * 24
              ).toFixed(2) +
              "小时";
          }
        }
      }
      return diffTime;
    },
    formatTimeWidth(times, start, end) {
      var leftPoint = 0;
      var firstday1 = new Date(times.begin_time).getTime() / 1000;
      var startnum1 = new Date(end).getTime() / 1000;
      var tofirstday1 = firstday1 - startnum1;

      var endtime1 = new Date(end).getTime() / 1000;
      var starttime1 = new Date(start).getTime() / 1000;
      var solttime1 = starttime1 - endtime1;
      leftPoint = (tofirstday1 / solttime1) * 100;
      //
      if (times.finish_time === "") {
        times.finish_time = start;
      }
      var percent;
      var firstday = new Date(times.begin_time).getTime() / 1000;
      var startnum = new Date(times.finish_time).getTime() / 1000;
      var tofirstday = startnum - firstday;
      var endtime = new Date(end).getTime() / 1000;
      var starttime = new Date(start).getTime() / 1000;
      var solttime = starttime - endtime;
      percent = (tofirstday / solttime) * 100;
      if (leftPoint < 0) {
        percent = percent + leftPoint;
      }
      return percent > 0 ? percent : 0;
    },
    formatTimeLeft(times, start, end) {
      var leftPoint;

      var firstday = new Date(times.begin_time).getTime() / 1000;
      var startnum = new Date(end).getTime() / 1000;
      var tofirstday = firstday - startnum;

      var endtime = new Date(end).getTime() / 1000;
      var starttime = new Date(start).getTime() / 1000;
      var solttime = starttime - endtime;
      leftPoint = (tofirstday / solttime) * 100;
      return leftPoint > 0 ? leftPoint : 0;
    },

    initNestId() {},
    startInterval() {
      if (this.timer) {
        clearInterval(this.timer);
      }
      const _this = this;
      this.timer = setInterval(() => {
        _this.requestWeather();
      }, 15 * 1000);
    },
    finishInterval() {
      console.log("finishInterval");
      clearInterval(this.timer);
      this.timer = undefined;
    },
    requestWeather() {
      // getWeatherInfo({ nest_code: this.nestId }).then(response => {
      //   this.weatherInfo = {
      //     humidity: response.data.humidity,
      //     temperature: response.data.temperature,
      //     weather_detection: response.data.weather_detection,
      //     wind_speed: response.data.wind_speed,
      //     wind_force: Number.parseInt(response.data.wind_force)
      //   }
      // })
    },
    // 退出机巢信息查看状态
    closeNestInfo() {
      MessageBox.confirm("是否退出当前机巢查看状态", "提示", {
        confirmButtonText: "退出",
        cancelButtonText: "取消",
        type222: "warning",
      }).then(() => {
        // this.$emit('update:isShow', false)
        this.$emit("closeNestComp");
        this.$bus.emit("toggleNestLayer", true);
        this.$bus.emit("toggleIssueLayer", true);
        // const path = this.$route.path; // 先获取路由路径
        // this.$router.push(path);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  caret-color: transparent;
}

.wrap {
  pointer-events: all;
  z-index: 1000;
  position: absolute;
  top: 70px;
  left: 0;
  right: 0;
  margin: auto;
  width: 500px;
  padding: 10px;
  border-radius: 10px 10px 0 0;
  background: hsla(199, 78%, 9%, 0.7);

  //border-radius: 8px;
  border: #051d28 1px solid;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;

  .item {
    flex: 1;
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 2fr;
    grid-row-gap: 5px;
    grid-column-gap: 10px;
    align-items: center;

    .img {
      grid-row-start: 1;
      grid-row-end: 3;
      width: 30px;
      height: 30px;
      justify-self: end;
      align-self: center;
    }

    .list_menu_wrap {
      font-size: 14px;
      color: darkgray;
    }

    .args {
      color: white;
    }
  }

  .timez {
    position: absolute;
    width: 100%;
    height: 8px;
    left: 0;
    bottom: -1px;
    opacity: 0.7;

    .offline {
      width: 100%;
      height: 8px;
      background: #aaaaaa;
      position: absolute;
      z-index: 4;
      cursor: pointer;
    }

    .speed_abnormal_line {
      width: 100%;
      height: 8px;
      // 显示条太窄，用条纹会很丑！！！
      // background: repeating-linear-gradient(-60deg, #F59A23, #F59A23 3px,
      //  #fff 0, #fff 6px);
      background: #f59a23;
      position: absolute;
      z-index: 1;
      cursor: pointer;
    }

    .rain_abnormal_line {
      width: 100%;
      height: 8px;
      background: #0ff;
      position: absolute;
      z-index: 2;
      cursor: pointer;
    }

    .speed_rain_abnormal_line {
      width: 100%;
      height: 8px;
      background: red;
      position: absolute;
      z-index: 3;
      cursor: pointer;
    }
  }

  .btn {
    color: white;
    min-width: 80px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 4px 10px;
    margin: 0 8px;
    box-sizing: border-box;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 4px;

    border: 1px solid #1cc1ff;
    border-image-repeat: repeat;
  }
}

.hover_info {
  position: relative;
  display: none;
  font-size: 14px;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);

  .forleftpoint {
    position: absolute;
    width: 250px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 10px;
    left: -20px;
    top: 0;
    border-radius: 5px;
  }

  > p {
    margin: 0;
    line-height: 20px;
  }

  .uptriangle {
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-bottom: 14px solid black;
    left: 50%;
    top: -14px;
    position: absolute;
    transform: translateX(-50%);
  }
}

.speed_abnormal_line:hover .hover_info {
  display: block;
}

.rain_abnormal_line:hover .hover_info {
  display: block;
}

.speed_rain_abnormal_line:hover .hover_info {
  display: block;
}

.offline:hover .hover_info {
  display: block;
}
</style>
